<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04.control_flow | KnockOut</title>
    <script src="../assets/knockout-3.5.1.js"></script>
</head>
<body>

  <h1 data-bind="text: city"> </h1>
  <!-- 原生方式，通过 coords.latitude 访问 -->
  <p>
    Latitude: <span data-bind="text: coords.latitude"> </span>,
    Longitude: <span data-bind="text: coords.longitude"> </span>
  </p>

  <!-- 使用 with 改变绑定上下文（绑定上下文切换到 coords） -->
  <p data-bind="with: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
  </p>

  <!-- 使用 using 改变绑定上下文（绑定上下文切换到 coords） -->
  <p data-bind="using: coords">
    Latitude: <span data-bind="text: latitude"> </span>,
    Longitude: <span data-bind="text: longitude"> </span>
  </p>

  <script type="text/javascript">
    var vm = {
      city: "London",
      coords: {
        latitude: 51.5001524,
        longitude: -0.1262362
      }
    };

    ko.applyBindings(vm);
  </script>

</body>
</html>